<template>
    <a-modal v-model="visible"
             :title="title"
             @ok="handleOk"
             @cancel="cancel"
             centered
             width="50em"
             :cancelText="cancelText"
             :okText="okText">
        <a-form-model
                ref="form"
                :model="noticeInfo"
                :rules="rules"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
        >
            <a-form-model-item  label="标题" prop="title">
                <a-input v-model="noticeInfo.title" :disabled="flag"/>
            </a-form-model-item>
            <a-form-model-item label="内容" prop="content">
                <a-textarea :rows="5" v-model="noticeInfo.content" :disabled="flag"/>
            </a-form-model-item>
            <a-form-model-item label="开始时间" prop="beginTime">
                <a-date-picker  showTime
                       format="YYYY-MM-DD HH:mm:ss"
                        v-model="noticeInfo.beginTime"
                       :disabled-date="disabledStartDate"
                        :default-value="moment(new Date(),'YYYY-MM-DD HH:mm:ss')"
                       @openChange="handleStartOpenChange"
                       :disabled="flag"
                       inputReadOnly/>
            </a-form-model-item>
            <a-form-model-item label="结束时间" prop="endTime">
                <a-date-picker  showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        v-model="noticeInfo.endTime"
                        :disabled-date="disabledEndDate"
                        @openChange="handleEndOpenChange"
                        :default-value="moment(new Date(new Date().setDate(new Date().getDate()+3)),'YYYY-MM-DD HH:mm:ss')"
                        :disabled="flag"
                        inputReadOnly/>
            </a-form-model-item>
            <a-form-model-item label="学院" prop="college">
<!--                从store中取到管理员所在学院的ID和学院的名称-->
                <a-select disabled v-model="noticeInfo.college">
                    <a-select-option :value="noticeInfo.college" >
                        {{accessState.admin_collegeName}}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="通知对象" prop="object">
                <a-select :default-value="noticeInfo.object" v-model="noticeInfo.object" :disabled="flag">
                    <a-select-option value="2">
                        学生
                    </a-select-option>
                    <a-select-option value="1">
                        老师
                    </a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>

<script>
    import {mapState} from "vuex";
    import moment from 'moment';
    const rules={
        title:[{ required: true, message: '请输入标题!',trigger: 'change'}],
        content:[{ required: true, message: '请输入内容!',trigger: 'change'}],
        beginTime:[{ required: true, message: '请输入开始时间!',trigger: 'change'}],
        endTime:[{ required: true, message: '请输入结束时间!',trigger: 'change'}],
        college:[{}],
        object:[{}]
    }
    export default {
        name: "AddNotice",
        data(){
            return{
                rules,
                flag:false,//标指位，判断当前是添加还是修改
                endOpen:false,//用于时间选择
                visible:false,//Modal是否可见
                title:'',
                cancelText:'',
                okText:'',
                //表格数据
                noticeInfo:{
                    title:'',
                    content:'',
                    beginTime:this.moment(new Date(),'YYYY-MM-DD HH:mm:ss'),//默认开始时间为当前时间
                    endTime:this.moment(new Date(new Date().setDate(new Date().getDate()+3)),'YYYY-MM-DD HH:mm:ss'),//默认结束时间为当前时间的三天后
                    college:'',
                    object:'2'
                }
            }
        },
        methods:{
            moment,
            //发布通知
            handleOk(){
                if(this.flag==false){//添加通知
                    this.$refs.form.validate(value=>{
                        if(value){
                            const notice={
                                title:this.noticeInfo.title,
                                content:this.noticeInfo.content,
                                beginTime:this.noticeInfo.beginTime.format('YYYY-MM-DD HH:mm:ss'),//将表格中的开始时间转成String
                                endTime:this.noticeInfo.endTime.format('YYYY-MM-DD HH:mm:ss'),//将表格中的结束时间转成String
                                college:this.noticeInfo.college,
                                object:this.noticeInfo.object,
                            }
                            //请求信息进行封装
                            const noticeInfo={
                                noticeInfo:notice,
                                token:this.accessState.token,
                            };
                            this.$store.dispatch("notice/addNotice",noticeInfo)
                            .then(()=>{
                                    this.$message.success("发布通知成功");
                                    this.visible=false;//Modal设为不可见
                                    this.$refs.form.resetFields();//重置表单
                                    this.$emit('get');
                            }).catch(err=>{
                                this.$message.error(err.msg);
                            });
                        }else{
                            this.$message.error("请正确填写表单");
                        }
                    });
                }else{
                    this.cancel();
                }
            },
            //关闭Modal弹窗回调函数
            cancel(){
                this.visible=false;
                this.$refs.form.resetFields();
            },
            //显示Modal弹窗
            showModel(judge){
                this.visible=true;
                //通过judge判断是发布通知还是产看通知
                if(judge==''){
                    this.flag=false;
                    this.title='发布通知';
                    this.cancelText="取消";
                    this.okText="发布";
                }else{
                    //查看信息
                    this.flag=true;
                    this.title='通知详情';
                    this.cancelText="取消";
                    this.okText="确定";
                    this.$store.dispatch("notice/noticeInfo",{noticeId:judge,token:this.accessState.token})
                    .then(data=>{
                            this.noticeInfo.title=data.data.noticeInfo.title;
                            this.noticeInfo.college=data.data.noticeInfo.college;
                            this.noticeInfo.object=data.data.noticeInfo.object.toString();
                            this.noticeInfo.content=data.data.noticeInfo.content.replace(/\r\n/g,'\r\n').replace(/\r/g,'\r').replace(/\n/g,'\n');
                            this.noticeInfo.beginTime=this.moment(new Date(data.data.noticeInfo.beginTime),'YYYY-MM-DD HH:mm:ss');
                            this.noticeInfo.endTime=this.moment(new Date(data.data.noticeInfo.endTime),'YYYY-MM-DD HH:mm:ss');
                    }).catch(err=>{
                        this.$message.error(err.msg);
                    })
                }
            },
            //时间选择自定义相关方法
            disabledStartDate(startValue) {
                const endValue = this.noticeInfo.endTime;
                if (!startValue || !endValue) {
                    return false;
                }
                return startValue.valueOf() > endValue.valueOf();
            },
            disabledEndDate(endValue) {
                const startValue = this.noticeInfo.beginTime;
                if (!endValue || !startValue) {
                    return false;
                }
                return startValue.valueOf() >= endValue.valueOf();
            },
            handleStartOpenChange(open) {
                if (!open) {
                    this.endOpen = true;
                }
            },
            handleEndOpenChange(open) {
                this.endOpen = open;
            },
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'notice_form' });
        },
        created() {
            this.noticeInfo.college=this.accessState.admin_collegeId;
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>

</style>
